export default class LabelCluster extends TMap.DOMOverlay {
  constructor(options) {
    super(options)
    // 移动端touchmove事件执行时需禁止触发touchend
    this.enableClick = true
  }

  onInit(options) {
    this.id = options.id
    this.type = options.type
    this.content = options.content
    this.parentId = options.parentId
    this.selfCount = options.selfCount
    this.position = options.position
  }

  // 销毁时需要删除监听器
  onDestroy() {
    this.dom.removeEventListener('click', this.onClick)
    this.dom.removeEventListener('touchend', this.onTouchEnd)
    this.dom.removeEventListener('touchmove', this.onTouchMove)
    this.dom.removeEventListener('mouseover', this.onMouseOver)
    this.removeAllListeners()
  }

  // 点击事件
  onClick(e) {
    this.emit('click', e, this.id, this.type, this.position, this.parentId)
  }

  // 移动端触摸结束事件
  onTouchEnd(e) {
    // 移动端的触摸移动后禁止触发touchend事件
    if (!this.enableClick) {
      this.enableClick = true
      return
    }
    this.emit('touchend', e)
  }

  // 移动端触摸移动事件
  onTouchMove(e) {
    // 移动端的触摸移动后禁止触发touchend事件
    this.enableClick = false
    this.emit('touchmove', e)
  }

  // 创建气泡DOM元素
  createDOM() {
    let a = require('@/assets/imgs/dashboard/dibiao.png')

    let dom = document.createElement('div')
    dom.style.cssText = 'position:absolute;top:0px;left:0px;'

    // 县市省marker
    let circleMarker = `
    <div class="circleMarker">
    <div class="flagpole"></div>
    <div class="flag">
      <div class="name text-overflow" title=${this.content}>${this.content}</div>
      <div class="count">${this.selfCount}</div>
    </div>
  </div>`

    // 区marker
    let districtsMarker = `
    <div class="districtsMarker flex">
      <div class="count">${this.selfCount}</div>
      <div class="title" title=${this.content}>${this.content}</div>
    </div>`

    // 街道marker
    let industryMarker = `
    <div class="industryMarker flex align-center">
      <img src="${a}" alt="" />
      <div class="company-name" title=${this.content}>${this.content}</div>
    </div>`

    let targetMarker
    if (this.type === 2 || this.type === 3) {
      targetMarker = circleMarker
    }
    if (this.type === 4) {
      targetMarker = districtsMarker
    }
    if (this.type === 5) {
      targetMarker = industryMarker
    }

    dom.innerHTML = targetMarker

    // 监听点击事件，实现zoomOnClick
    this.onClick = this.onClick.bind(this)
    this.onTouchEnd = this.onTouchEnd.bind(this)
    this.onTouchMove = this.onTouchMove.bind(this)
    // pc端注册click事件，移动端注册touchend事件
    dom.addEventListener('click', this.onClick)
    dom.addEventListener('touchend', this.onTouchEnd)
    dom.addEventListener('touchmove', this.onTouchMove)

    // 鼠标移入层级变高
    this.onmousemove = this.onmousemove.bind(this)
    this.mouseout = this.mouseout.bind(this)
    dom.addEventListener('mousemove', this.onmousemove)
    dom.addEventListener('mouseout', this.mouseout)
    return dom
  }

  onmousemove(e) {
    this.dom.style.zIndex = 9999
  }

  mouseout(e) {
    this.dom.style.zIndex = ''
  }

  // 更新
  updateDOM() {
    if (!this.map) {
      return
    }
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position)

    // 使饼图中心点对齐经纬度坐标点
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'
    let top = pixel.getY() - this.dom.clientHeight / 2 + 'px'
    this.dom.style.transform = `translate(${left}, ${top})`
    this.emit('dom_updated')
  }
}
